<template>
    <div style="display: flex">
        <el-form :model="form" status-icon :rules="rules" ref="form" label-width="80px">
            <el-form-item label="背景颜色" prop="background">
                <div style="display: flex">
                    <el-input type="text" v-model="form.background" placeholder="请选择背景颜色"></el-input>
                    <el-color-picker v-model="form.background"></el-color-picker>
                </div>
            </el-form-item>
            <el-form-item label="字体颜色" prop="color">
                <div style="display: flex">
                    <el-input type="text" v-model="form.color" placeholder="请选择字体颜色"></el-input>
                    <el-color-picker v-model="form.color"></el-color-picker>
                </div>
            </el-form-item>
        </el-form>
        <Lcd :background="form.background" :color="form.color"></Lcd>
    </div>
</template>

<script>

import Lcd from '../Lcd.vue'

export default {
    name: 'SelectLcd',
    components: {Lcd},
    props: {
        flag: {
            type: Number,
            default: 0
        },
        params: {
            type: String,
            default: ''
        }
    },
    created() {
        if (this.params != null || this.params !== '') {
            let obj = JSON.parse(this.params)
            let color = obj['color']
            if (color !== undefined) {
                this.form.color = color
            }
            let background = obj['background']
            if (background !== undefined) {
                this.form.background = background
            }
        }
    },
    data() {
        return {
            form: {
                background: '#409EFF',
                color: '#000000'
            },
            rules: {
                background: [
                    {required: true, message: '请输入背景颜色', trigger: 'blur'}
                ],
                color: [
                    {required: true, message: '请输入字体', trigger: 'blur'}
                ]
            }
        }
    },
    watch: {
        flag(newVal, oldVal) {
            if (newVal !== oldVal) {
                this.transferData()
            }
        }
    },
    methods: {
        transferData() {
            this.$emit('transferData', this.form)
        }
    }
}
</script>

<style scoped>

</style>
